<template>
  <div>
    <el-form>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>家用电器</el-breadcrumb-item>
      </el-breadcrumb>
    </el-form>
    <div v-for="item in TypeCommit" :key="item.index">
      <div class="homeuse10">
        <div>
          <img
            src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/2206371473866/O1CN01i7sQPd1eQftIkqPjS_!!0-item_pic.jpg_230x230.jpg_.webp"
            alt=""
          />
        </div>
        <div style="width: 230px">
          {{item.commodityName}}
        </div>
        <div class="ship icon-service-free">
          <span style="color: #f40">
            ￥ {{item.commodityMoney}} <span style="color: #f40">包邮</span></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { TypeIdCommodity } from '../../api/home'
export default {
  data () {
    return {
      TypeCommit: []
    }
  },
  methods: {
    p1_details () {
      this.$router.push('/details')
    },
    getCommodity () {
      console.log(this.$route.params.key);
      TypeIdCommodity(this.$route.params.key).then((res) => {
        this.TypeCommit=res.data.data
        console.log(this.TypeCommit);
      })
    }
  },
  mounted () {
    this.getCommodity();
  }

}
</script>

<style scoped>
.homeuse10 {
  margin-left: 100px;
  float: left;
}
</style>